<template>
	<!-- 在pages.json中为本页设置 "enablePullDownRefresh": false, 以免和 enable-back-to-top 冲突 -->
	<view class="container">
		<view class="header">
			<text class="title">Demo 3: 其他属性与Flex布局</text>
			<text class="status-text">{{ topStatus }}</text>
		</view>

		<!-- 
			enable-back-to-top: 在App和微信小程序中，点击状态栏或标题栏可返回顶部
			enable-flex: 在微信小程序中，让 scroll-view 自身可以成为 flex 容器
			@scrolltoupper: 滚动到顶部时触发
		-->
		<scroll-view class="flex-scroll" scroll-y enable-back-to-top enable-flex @scrolltoupper="onScrollToUpper">
			<!-- 由于开启了 enable-flex, scroll-view 现在是 flex container -->
			<!-- 下面这些子元素会遵循 flex 布局规则 -->
			<view class="flex-item item-a">
				<text>Item A</text>
				<text>内容撑开高度</text>
			</view>
			<view class="flex-item item-b">
				<text>Item B</text>
			</view>
			<view class="flex-item item-c">
				<text>Item C</text>
				<text>内容较多，撑开高度</text>
				<text>第三行</text>
			</view>
			<view class="flex-item item-d">
				<text>Item D</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topStatus: '正在向下滚动'
			}
		},
		onReady() {
			// enable-back-to-top 需要在原生标题栏存在时效果最佳
			// H5端此功能无效
			uni.showToast({
				title: '在App或小程序中，尝试双击顶部标题栏',
				icon: 'none',
				duration: 3000
			})
		},
		methods: {
			/**
			 * @scrolltoupper 触发的方法
			 */
			onScrollToUpper() {
				this.topStatus = '已滚动到顶部！';
				console.log('触发了 onScrollToUpper 事件');
				// 2秒后重置状态
				setTimeout(() => {
					this.topStatus = '正在向下滚动';
				}, 2000);
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		background-color: #f8f8f8;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.status-text {
		font-size: 24rpx;
		color: #E6A23C;
	}

	.flex-scroll {
		/* 关键：设置固定高度 */
		flex: 1;
		height: 0;
		/* 关键：在开启 enable-flex 后，这些样式才会生效 */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/* 子项宽度撑满 */
	}

	.flex-item {
		padding: 50rpx 30rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}

	.item-a {
		background-color: #67C23A;
	}

	.item-b {
		background-color: #409EFF;
	}

	.item-c {
		background-color: #9049DE;
	}

	.item-d {
		background-color: #F56C6C;
		height: 400rpx;
		/* 特意增高，方便滚动 */
	}
</style>